<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .second li,
        .third li {
            margin-top: 30px;
        }

        div ul li {
            position: relative;
            float: left;
            margin-right: 25px;
            background-color: skyblue;
            width: 200px;
            height: 200px;
            list-style: none;
            border-radius: 5%;
        }

        .one p,
        .four .f2,
        .six .s1,
        .seven .e1,
        .thirteen .i1,
        .fourteen .o1,
        .eighteen .h1,
        .nineteen .n1,
        .twenty .y1,
        .eleven .l1,
        .twenty-one .x1 {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            top: -16px;
        }

        .two p {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            top: -16px;
            right: 75px;
        }

        .three p,
        .four .f1,
        .five .v1,
        .seven .e4,
        .thirteen .i2,
        .fourteen .o2,
        .twenty-one .x2 {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            top: -16px;
            right: 0px;
        }

        .five .v2,
        .six .s2,
        .seven .e2,
        .thirteen .i4,
        .fourteen .o4,
        .twelve .w2,
        .seventeen p,
        .twenty .y2,
        .twenty-one .x4 {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            bottom: -16px;
            right: 0px;
        }


        .six .s3,
        .nine p,
        .seven .e3,
        .eighteen .h2,
        .twenty-one .x5 {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            /* bottom: -16px; */
            top: 60px;
            right: 75px;
        }

        .seven .e5,
        .eleven .l2,
        .twelve .w1,
        .thirteen .i3,
        .fourteen .o3,
        .fifteen p,
        .twenty-one .x3 {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            bottom: -16px;
            left: 0px;
        }



        .eight p,
        .fourteen .o5 {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            top: 60px;

        }

        .ten p,
        .fourteen .o6,
        .nineteen .n2 {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            top: 60px;
            right: 0px;
        }

        .sixteen p,
        .twenty-one .x6 {
            position: absolute;
            border-radius: 50%;
            background-color: #fff;
            width: 50px;
            height: 50px;
            bottom: -16px;
            right: 75px;
        }

        .lj {
            position: relative;
        }

        body .lj a {
            position: absolute;
            bottom: -694px;
            left: -1569px;
        }
    </style>
</head>

<body>
    <div>
        <ul class="frist">
            <li class="one">
                <p></p>
            </li>
            <li class="two">
                <p></p>
            </li>
            <li class="three">
                <p></p>
            </li>
            <li class="four">
                <p class="f1"></p>
                <p class="f2"></p>
            </li>
            <li class="five">
                <p class="v1"></p>
                <p class="v2"></p>
            </li>
            <li class="six">
                <p class="s1"></p>
                <p class="s2"></p>
                <p class="s3"></p>
            </li>
            <li class="seven">
                <p class="e1"></p>
                <p class="e2"></p>
                <p class="e3"></p>
                <p class="e4"></p>
                <p class="e5"></p>
            </li>
        </ul>
        <ul class="second">
            <li class="eight">
                <p></p>
            </li>
            <li class="nine">
                <p></p>
            </li>
            <li class="ten">
                <p></p>
            </li>
            <li class="eleven">
                <p class="l1"></p>
                <p class="l2"></p>
            </li>
            <li class="twelve">
                <p class="w1"></p>
                <p class="w2"></p>
            </li>
            <li class="thirteen">
                <p class="i1"></p>
                <p class="i2"></p>
                <p class="i3"></p>
                <p class="i4"></p>
            </li>
            <li class="fourteen">
                <p class="o1"></p>
                <p class="o2"></p>
                <p class="o3"></p>
                <p class="o4"></p>
                <p class="o5"></p>
                <p class="o6"></p>
            </li>
        </ul>
        <ul class="third">
            <li class="fifteen">
                <p></p>
            </li>
            <li class="sixteen">
                <p></p>
            </li>
            <li class="seventeen">
                <p></p>
            </li>
            <li class="eighteen">
                <p class="h1"></p>
                <p class="h2"></p>
            </li>
            <li class="nineteen">
                <p class="n1"></p>
                <p class="n2"></p>
            </li>
            <li class="twenty">
                <p class="y1"></p>
                <p class="y2"></p>
            </li>
            <li class="twenty-one">
                <p class="x1"></p>
                <p class="x2"></p>
                <p class="x3"></p>
                <p class="x4"></p>
                <p class="x5"></p>
                <p class="x6"></p>
            </li>
        </ul>

    </div>
    <span class="lj"><a href="../html/浮动布局练习.html">下一关</a></span>
</body>

</html>